<template>
  <div class="jmzjxx">
    <div class="box">
      <div
        style="
          display: inline-block;
          width: 25%;
          border-right: 1px solid #ccc;
          padding: 17px 10px;
          background-color: #f5f5f5;
        "
      >
        居民姓名
      </div>
      <div style="display: inline-block; width: 75%; padding: 10px">{{ info.residentName }}</div>
    </div>
    <div class="box">
      <div
        style="
          display: inline-block;
          width: 25%;
          border-right: 1px solid #ccc;
          padding: 17px 10px;
          background-color: #f5f5f5;
        "
      >
        出生证编号
      </div>
      <div style="display: inline-block; width: 75%; padding: 10px">
        <span v-if="!csbh">
            <span v-for="item in info.idCard" :key="item" class="mini_box">{{
          item
        }}</span>
        </span>
        <el-input v-if="csbh" size="small" v-model="info.idCard" style="width: 250px;"></el-input>
        <el-button v-if="!csbh" type="text" icon="el-icon-edit" size="mini" style="float: right;" @click="csbh = true">修改</el-button>
        <el-button v-if="csbh" type="text" size="mini" style="float: right;margin-left: 5px;" @click="csbh = false">保存</el-button>
        <el-button v-if="csbh" type="text" size="mini" style="float: right;" @click="csbh = false">取消</el-button>
      </div>
    </div>
    <div class="box">
      <div
        style="
          display: inline-block;
          width: 25%;
          border-right: 1px solid #ccc;
          padding: 17px 10px;
          background-color: #f5f5f5;
        "
      >
        身份证号
      </div>
      <div style="display: inline-block; width: 75%; padding: 10px">
        <span v-if="!cszh">
            <span v-for="item in info.idCard" :key="item" class="mini_box">{{
          item
        }}</span>
        </span>
        <el-input v-if="cszh" size="small" v-model="info.idCard" style="width: 250px;"></el-input>
        <el-button v-if="!cszh" type="text" icon="el-icon-edit" size="mini" style="float: right;" @click="cszh = true">修改</el-button>
        <el-button v-if="cszh" type="text" size="mini" style="float: right;margin-left: 5px;" @click="cszh = false">保存</el-button>
        <el-button v-if="cszh" type="text" size="mini" style="float: right;" @click="cszh = false">取消</el-button>
      </div>
    </div>
    <div class="box">
      <div
        style="
          display: inline-block;
          width: 25%;
          border-right: 1px solid #ccc;
          padding: 17px 10px;
          background-color: #f5f5f5;
        "
      >
        户口簿证件号
      </div>
      <div style="display: inline-block; width: 75%; padding: 10px">
        <span v-if="!hkbzjh">
            <span v-for="item in info.idCard" :key="item" class="mini_box">{{
          item
        }}</span>
        </span>
        <el-input v-if="hkbzjh" size="small" v-model="info.idCard" style="width: 250px;"></el-input>
        <el-button v-if="!hkbzjh" type="text" icon="el-icon-edit" size="mini" style="float: right;" @click="hkbzjh = true">修改</el-button>
        <el-button v-if="hkbzjh" type="text" size="mini" style="float: right;margin-left: 5px;" @click="hkbzjh = false">保存</el-button>
        <el-button v-if="hkbzjh" type="text" size="mini" style="float: right;" @click="hkbzjh = false">取消</el-button>
      </div>
    </div>
    <div class="tag_y">
        温馨提示：编辑时系统将进行证件号重复建档校验，如果对应证件号已建立了居民电子健康档案，此时将不能直接维护，需联系客服协助进行档案合并。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        出生证编号: "9567259183",
        身份证号: "533221196405082742",
        户口簿证件号: "533221196405082742",
      },
      csbh:false,
      cszh:false,
      hkbzjh:false
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        this.info = res.data[0];
      });
    },
  },

};
</script>

<style scoped lang="scss">
.jmzjxx {
  padding: 20px;
  .box {
    border: 1px solid #ccc;
    margin-top: 15px;
  }
  .mini_box {
    padding: 4px 6px;
    border: 1px solid #eee;
    margin: 0 2px;
  }
  .tag_y{
    padding: 5px 10px;
    margin-top: 20px;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
  }
}
</style>